<template>
  <div class="address">

    <scroll-view :scroll-y="scrollflag" class="addcont" style="height: 100%;">
      <!-- <div class="addcont"> -->
      <div v-if="listData.length!=0" class="item">
        <div class="list" @touchstart="startMove" :data-index="index" @touchmove="deleteGoods" @touchend="endMove" v-for="(item, index) in listData" :key="index">
          <div class="addresslist" :style="item.textStyle">
            <div>
              <span>{{item.name}}</span>
              <div v-if="item.is_default" class="moren">
                默认
              </div>
            </div>
            <div class="info">
              <p>{{item.mobile}}</p>
              <p>{{item.address+item.address_detail}}</p>
            </div>
            <div @click="toDetail(item.id)"></div>

          </div>
          <div @click="delAddress(item.id)" class="delete" :style="item.textStyle1">
            <div>
              删除
            </div>
          </div>
        </div>

      </div>

      <div v-else class="center">
        <p>收货地址在哪里?</p>
      </div>
    </scroll-view>

    <div class="bottom">
      <div @click="wxaddress(1)">+新建地址</div>
      <div @click="wxaddress">一键导入微信地址</div>
    </div>
  </div>
</template>

<script>
import { get, getStorageOpenid } from '../../utils'
export default {
  onShow () {
    this.openId = getStorageOpenid()
    this.getAddressList()
  },
  created () {},
  computed: {
    tranX () {},
    tranX1 () {}
  },
  data () {
    return {
      scrollflag: true,
      nowIndex: 0,
      userInfo: {},
      imgUrl: '',
      listData: [],
      tranX: 0,
      tranX1: 0,
      startX: '',
      startY: '',
      moveX: '',
      moveY: '',
      moveEndX: '',
      moveEndY: '',
      X: 0,
      Y: '',
      flag: false
    }
  },
  components: {},
  methods: {
    initTextStyle () {
      // 滑动之前先初始化数据
      for (var i = 0; i < this.listData.length; i++) {
        this.listData[i].textStyle = ''
        this.listData[i].textStyle1 = ''
      }
    },
    startMove (e) {
      this.initTextStyle()
      this.startX = e.touches[0].pageX
      this.startY = e.touches[0].pageY
    },
    async delAddress (id) {
      var _this = this
      mpvue.showModal({
        title: '',
        content: '是否要删除该收货地址',
        success: function (res) {
          if (res.confirm) {
            const data = get('/address/deleteAction', {
              id: id
            }).then(() => {
              _this.getAddressList()
            })
          } else if (res.cancel) {
            console.log('用户点击取消')
            // 滑动之前先初始化样式数据
            _this.initTextStyle()
          }
        }
      })
    },
    deleteGoods (e) {
      // 滑动之前先初始化样式数据
      this.initTextStyle()
      var index = e.currentTarget.dataset.index
      console.log(this.X)
      if (this.X <= -100) {
        this.flag = true
      }
      if (!this.flag) {
        this.moveX = e.touches[0].pageX
        this.moveY = e.touches[0].pageY
        this.X = this.moveX - this.startX
        this.Y = this.moveX - this.startY
        this.listData[index].textStyle = `transform:translateX(${this.tranX}rpx);`
        if (this.X >= 100) {
          this.X = 0
        }
        this.tranX = this.X
        if (this.X <= -100) {
          this.X = -100
        }
        this.tranX1 = this.X
        this.listData[index].textStyle1 = `transform:translateX(${this.tranX1}rpx);`
      } else {
        this.moveX = e.touches[0].pageX
        this.moveY = e.touches[0].pageY
        this.X = this.moveX - this.startX
        this.Y = this.moveX - this.startY

        this.tranX = this.X - 100
        this.listData[index].textStyle = `transform:translateX(${this.tranX}rpx);`
        // transform:'translateX(' + tranX + 'rpx)'
        console.log('heyushuo')

        console.log(this.listData[index].textStyle)

        if (this.X + -100 > -100) {
          this.flag = false
        }
        this.tranX1 = -100
        this.listData[index].textStyle1 = `transform:translateX(-100rpx);`
        console.log(this.listData[index].textStyle1)
        // this.listData = this.listData;
      }

      // this.listData = this.listData;
      // transform:'translateX(' + tranX1 + 'rpx)'
      // 大于这个值认为在滑动
      // if (X > 10 || X < -10) {

      // }

      //

      // if (Math.abs(this.X) > Math.abs(this.Y) && this.X > 20) {
      //   this.scrollflag = false;
      // } else if (Math.abs(this.X) > Math.abs(this.Y) && this.X < 20) {
      //   console.log("right 2 left");
      // }
    },
    endMove (e) {
      var index = e.currentTarget.dataset.index
      if (this.X > -50) {
        this.tranX1 = 0
        this.tranX = 0
        this.listData[index].textStyle = `transform:translateX(${this.tranX}rpx);`
        this.listData[index].textStyle1 = `transform:translateX(${this.tranX1}rpx);`
      } else if (this.X <= -50) {
        this.tranX1 = -100
        this.tranX = -100
        this.listData[index].textStyle = `transform:translateX(${this.tranX}rpx);`
        this.listData[index].textStyle1 = `transform:translateX(${this.tranX1}rpx);`
      }
      // if (Math.abs(this.X) >= 300) {
      //   this.tranX = 0;
      // }
      // if (Math.abs(this.X) <= -300) {
      //   this.tranX = -100;
      // }
      // this.moveEndX = e.touches[0].pageX;
      // this.moveEndY = e.touches[0].pageY;
      // let X = this.moveEndX - this.startX;
      // let Y = this.moveEndY - this.startY;
      // if (X > 50 || X >= 100) {
      //   X = 0;
      // }
      // if (X < -50 || X <= -100) {
      //   X = -100;
      // }
      // this.tranX = X;
    },
    toDetail (id) {
      mpvue.navigateTo({
        url: '/pages/addaddress/main?id=' + id
      })
    },
    async getAddressList () {
      var _this = this
      const data = await get('/address/getListAction', {
        openId: _this.openId
      })
      for (var i = 0; i < data.data.length; i++) {
        data.data[i].textStyle = ''
        data.data[i].textStyle1 = ''
      }
      this.listData = data.data
      console.log(this.listData)
    },
    wxaddress (index) {
      if (index === 1) {
        mpvue.navigateTo({
          url: '/pages/addaddress/main'
        })
      } else {
        mpvue.chooseAddress({
          success: function (res) {
            var result = encodeURIComponent(JSON.stringify(res))
            mpvue.navigateTo({
              url: '/pages/addaddress/main?res=' + result
            })
          }
        })
      }
    }
  }
}
</script>

<style lang='scss' scoped>
@import "./style.scss";
</style>
